<template>
  <div>
    <van-sidebar v-model="activeKey" @change="onChange">
      <van-sidebar-item
        :title="item.name"
        v-for="item in list"
        :key="item.cid"
      />
      <div class="cent">
          <div>
              <span>热门分类</span>
              <ul>
                  <li></li>
              </ul>
          </div>
      </div>
    </van-sidebar>
  </div>
</template>

<script>
import { getClissify } from "@/api/clissify";
export default {
  data() {
    return {
      activeKey: 0,
      list: [],
      value: [],
    };
  },

  async mounted() {
    let ret = await getClissify();
    console.log(ret.data);
    this.list = ret.data.data;
    // console.log(ret.data.data.floors); 
    /*     for( let index in this.list ){
        this.value = this.list[index].name;
        
    } */
    this.onChange();
  },
  methods: {
    onChange(key) {
      //   console.log(index);
      let cent = document.querySelector(".cent");
      //   console.log(cent);
      // cent.innerHTML = this.value;
      // console.log(this.value[index]);
      for (let index in this.list) {
        this.value = this.list[index].name;
        if( key == index ){
            cent.innerHTML = this.list[index].name
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cent {
  width: 75%;
  height: 100px;
//   background-color: wheat;
font-size: 18px;
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 1000;
}
</style>